<template>
  <div v-if="cataList">
    <!-- 需要判断 如果有数据就渲染 没数据 等待 -->
    <!-- <router-view >
    </router-view>-->
    <div class="sorttil">
      <router-link to="/home">
        <van-icon name="wap-home-o" color="#000" />
      </router-link>
      <span class="title">{{cataList.subCategory.categoryName}}</span>
      <i></i>
    </div>
    <!--  -->
    <van-tabs v-model="active" swipeable v-if="cataList" @change="onChange">
      
      <!-- <van-divider />
      <van-grid column-num="5" icon-size="0" border="false">
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
</van-grid> -->
      <ul>
        <li @click="handleClicks(1)"  :class="{active: 1 === currentIndex}">
           热销 
        </li>
        <li @click="handleClicks(2)"  :class="{active: 2 === currentIndex}">
           销量
        </li>
        <li @click="handleClicks(3)" :class="{active: 3 === currentIndex}" >
           新品 
        </li>
        <li @click="handleClicks(4)" :increase="increase" :class="{active: 4 === currentIndex}">
          价格
        <div>
          <van-icon name="arrow-up" :color="red" />
          <van-icon name="arrow-down" :color="black" />
        </div>
        </li>
        <li @click="handleClicks(5)" v-if=" attrData &&(attrData.length > 0)" >
           
           <van-cell is-link  @click="showPopup">筛选</van-cell>
           <van-popup v-model="show" position="right" :style="{ height: '100%' }" >
              <FilterAttr  @selectAttr="handlSelect" :sortId="sortId" :attrDatas="attrData"></FilterAttr>
           </van-popup>
        </li>
      </ul>
        <van-tab
          v-for="items in cataList.subCategory.threeLevelcategoryList"
          :title="items.categoryName"
          :key="items.categoryId"
          :name="items.categoryId"
          :to="{ name: 'goodsort', params: {cataId , sortId:changeSortId}}"
        >
        
          <van-skeleton title :row="3" :loading="loading" v-show="loading" />
          <van-list
            v-model="loaded"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <GoodsSortList
              v-for="(item , key) in sortData"
              v-show="!loading"
              :allSortData="item"
              :key="key"
            ></GoodsSortList>
          </van-list>
          
        </van-tab>
     <!-- <van-loading size="24px" vertical>加载中...</van-loading> -->
    </van-tabs>
  </div>
</template>
<script>
import GoodsSortList from "../views/GoodsSortList";
import Vue from "vue";
import { Icon, Tab, Tabs, Skeleton, Divider ,Grid, GridItem , Loading , List , Popup} from "vant";
import FilterAttr from './FilterAttr'
import axios from "axios";
import VueLazyload from "vue-lazyload";
import Select from "../components/Select";
Vue.use(Grid);
Vue.use(Popup);
Vue.use(List);
Vue.use(Loading);
Vue.use(GridItem);
Vue.use(Divider);
Vue.use(Icon);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Skeleton);
export default {
  data() {
    return {
      active: 2,
      cataId: this.$route.params.cataId,
      sortId: this.$route.params.sortId,
      cataList: "",
      sortList: "",
      currentIndex:1,
      //    sortList可能不需要
      sortData: "",
      allSortData: [],
      loading: false,
      black:"black",
      red:"red",
      increase:true,
      changeSortId:'',
      sortType:0,
      sortValue:0,
      // onLoad:true,
      finished:false,
      show: false,
      attrData: '',
      loaded:false,
      refreshing: false,
      index:1,
    };
  },
  async created() {
    axios.post('/getFilterAttr' , {
      categoryId: this.sortId,
      pageFlag: 1
    })
    .then((result) => {
      this.attrData = []
      this.attrData = result.data.data.facet
      console.log('this.attrData' , this.attrData)
    })
    .catch((err) => {
      console.log(err)
    })
    this.active = this.sortId;
    //    重新刷新 路由 则 params里面的值消失
    //    渲染头部 
    await axios
      .post("biyao", {
        topicld: 10300148,
        pageId: "moses:pid_1",
        sortType: this.sortType,
        sortValue: this.sortValue,
        pageSize: 20,
        pageIndex: 1,
        categoryId: this.cataId
      })
      .then(result => {
        this.cataList = result.data.data;
        if (this.sortId === undefined) {
          // 初始状态 数据显示为一大类的第一小类
          this.sortId = this.cataList.subCategory.threeLevelcategoryList[0].categoryId;
        }
        // 渲染相应的商品
        axios
          .post("biyao", {
            topicld: 10300148,
            pageId: "moses:pid_1",
            sortType: this.sortType,
            sortValue: this.sortValue,
            pageSize: 20,
            pageIndex: 1,
            categoryId: this.sortId
          })
          .then(result => {
            this.sortData = result.data.data.blockList[0].block;
            if( this.sortData.length < 9 ){
              this.finished = true
            }
          })
          .catch(err => {
            console.log(err);
          });
      })
      .catch(err => {
        console.log(err);
      });
  },
  mounted() {},
  components: {
    GoodsSortList,
    Select,
    FilterAttr
  },
  methods: {
   onLoad(){
        this.index ++
        console.log( "----", this.index)
        axios
          .post("categoryListNew", {
            topicld: 10300148,
            pageId: "moses:pid_1",
            sortType: this.sortType,
            sortValue: this.sortValue,
            pageSize: 20,
            pageIndex: this.index,
            categoryId: this.sortId,
            onclickIndex: 5,
            pageType:1,
            
          })
          .then(result => {
            let data = result.data.data.blockList[0].block
            console.log(result)
            if( data.length < 9 ){
                this.finished = true
            }
            for( let i = 0 ; i < 10 ; i++  ){
              this.sortData.push( data[i] )
            }
            this.loaded = false
           
            // data.forEach(element => {
            //   console.log("-------------------------------------")
            //   console.log(element)
            //   this.sortData.push(element)
            // });
            // this.sortData.push(result.data.data.blockList[0].block)
            
            console.log(this.sortData)
          })
          .catch(err => {
            console.log(err);
          });
      
      
    },
    handlSelect(str){
      this.show = false
      axios
        .post("biyao", {
          topicld: 10300148,
          pageId: "moses:pid_1",
          sortType: this.sortType,
          sortValue: this.sortValue,
          pageSize: 20,
          pageIndex: 1,
          categoryId: this.sortId,
          selectedScreenAttrs:str
        })
        .then(result => {
          this.sortData = result.data.data.blockList[0].block;
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    onChange(name, title) {
      this.loading = true;
      this.changeSortId = Number(name)
      console.log(name)
      this.sortId = this.changeSortId

      axios
        .post("biyao", {
          topicld: 10300148,
          pageId: "moses:pid_1",
          sortType: this.sortType,
          sortValue: this.sortValue,
          pageSize: 20,
          pageIndex: 1,
          categoryId: this.sortId
        })
        .then(result => {
          this.sortData = result.data.data.blockList[0].block;
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
        // 渲染相应的筛选
      axios.post('/getFilterAttr' , {
      categoryId: this.sortId,
      pageFlag: 1
    })
    .then((result) => {
      this.attrData = []
      this.attrData = result.data.data.facet
      console.log('this.attrData' , this.attrData)
    })
    .catch((err) => {
      console.loading(err)
    })
    },
    showPopup() {
      this.show = true;
    },
    handleClicks(index){
      // console.log(this.cataId  , this.sortId)
      this.currentIndex = index
      switch(index){
        case 1:
          this.sortType = 0;
          this.sortValue = 0;
          break;
        case 2:
          this.sortType = 1;
          this.sortValue = 0;
          break;
        case 3:
          this.sortType = 5;
          this.sortValue = 0;
          break;
        case 4: 
        if(this.increase){
          this.increase = false
          this.sortType = 2;
          this.sortValue = 0;
          this.black  = 'black';
          this.red = 'red';
        }else{
          this.increase = true
          this.sortType = 2;
          this.sortValue = 1;
          this.black  = 'red';
          this.red = 'black';
        }
        break;
          default:
            this.sortType = 0;
            this.sortValue = 0;
            break;
      }
      
      axios
        .post("biyao", {
          topicld: 10300148,
          pageId: "moses:pid_1",
          sortType: this.sortType,
          sortValue: this.sortValue,
          pageSize: 20,
          pageIndex: 1,
          categoryId: this.sortId
        })
        .then(result => {
          this.sortData = result.data.data.blockList[0].block;
          this.loading = false;
        })
        .catch(err => {
          // console.log('1')

          console.log(err);
        });
    }
  }
};

</script>
<style lang="stylus" scoped>
ul
  display flex
  width 100%
  height 1rem
  justify-content center
  align-items center

  li
    width 20%
    height 100%
    text-align center
    font-size .3rem
    color black
    padding .3rem 0
    &:nth-child(4)
      display flex
      justify-content center
      align-items center
    
      
    div
      display flex
      margin-left .06rem
      flex-direction column
.sorttil {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    font-size: 0.32rem;
    color: #333;
  }

  i {
    width: 0.6rem;
    height: 0.6rem;
    padding: 0.15rem 0.2rem;
    font-size: 0.48rem;
  }
}
</style>
<style lang="stylus" scoped>
.van-cell
  padding 0 
  font-size .3rem

.van-cell__right-icon
  display none
.active
  color red
</style>
